<template>
  <div class="text-cell">
    <span class="title w-text-gray">
      {{ title }}&nbsp;&nbsp;
    </span>
    <span class="detail w-text-dark-grey">
      {{ detail }}
    </span>
  </div>
</template>

<script>
  /**
   * 文字显示
   */
  export default {
    name: 'TextCell',
    props: {
      /**
       * 标题
       */
      title: {
        type: String,
        default: ""
      },
      /**
       * 详情
       */
      detail: {
        type: String,
        default: null
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .text-cell {
    display: flex;
    justify-content: flex-start;
    padding: 5px 0px;
    line-height: 24px;

    > .title {
      color: #333;
      white-space: nowrap;
    }

    > .detail {
      color: #666;
    }
  }

</style>
